<!-- 首页 -->
<template>
	<view class="index-page">
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in bannerImgs">
					<view class="swiper-item">
						<image :src="item.src" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="v-bgd fun-list">
			<view class="fun-item" v-for="item in funList" @click="toPage(item.pageUrl)">
				<image :src="item.funImgSrc" mode=""></image>
				<view class="funName">{{item.funName}}</view>
			</view>
		</view>

		<view class="v-bgd notice" @click="toNoticeInfo">
			<image src="/static/images/natice.png" mode=""></image>
			<view class="notice-content">
				<view class="notice-title">{{lastNotice.title}}</view>
				<view class="notice-text">{{lastNotice.content}}</view>
			</view>
		</view>

		<view class="">
			<view class="v-bgd pro-item">
				<image src="/static/images/fram.png" mode=""></image>
				<text>基地信息</text>
			</view>
			<view class="v-bgd pro-item">
				<image src="/static/images/integral.png" mode=""></image>
				<text>积分排行</text>
			</view>
			<view class="v-bgd score-list">
				<view class="score-item">
					<image src="/static/images/one.png" mode="" style="width: 120rpx;height: 120rpx;"></image>
					<view class="score-item-info">
						<h3>积分总数：234</h3>
						<text>经营主体名称：草莓基地</text>
					</view>
				</view>
			</view>
			<view class="v-bgd pro-item">
				<image src="/static/images/dynamic.png" mode=""></image>
				<text>最新动态</text>
			</view>
		</view>
		<view class="bottom-text">
			<text>到底了</text>
		</view>
	</view>
</template>

<script>
	import baseUrl from '../../config.js';
	import request from '../../request.js'

	export default {
		data() {
			return {
				bannerImgs: [{
					index: "1",
					src: "/static/images/3.jpg"
				}, {
					index: "2",
					src: "/static/images/2.jpg"
				}, {
					index: "3",
					src: "/static/images/3.jpg"
				}],
				funList: [{
						index: "1",
						pageUrl: "/pages/dynamic/dynamicManage",
						funName: "动态",
						funImgSrc: "/static/images/icons/icon_dynamic.svg"
					}, {
						index: "2",
						pageUrl: "/pages/employee/empRecords",
						funName: "用工",
						funImgSrc: "/static/images/icons/icon_yonggong.svg"
					},
					{
						index: "3",
						pageUrl: "/pages/employee/employee",
						funName: "员工",
						funImgSrc: "/static/images/icons/icon_yuangong.svg"
					},
					{
						index: "4",
						pageUrl: "/pages/sales/salesRecords",
						funName: "销售",
						funImgSrc: "/static/images/icons/icon_xiaoshou.svg"
					},
					{
						index: "5",
						pageUrl: "/pages/finance/financialRecords",
						funName: "账务",
						funImgSrc: "/static/images/icons/icon_zhangwu.svg"
					}
				],
				lastNotice: {
					nid: "1",
					title: "同心协力抗疫",
					content: "同心协力抗疫，自觉从我做起！"
				}
			}
		},
		methods: {
			toPage(pageUrl) {
				uni.navigateTo({
					url: pageUrl,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toNoticeInfo() {
				request({
					url: 'api/v1.0/roleMenu/getListMenu',
					method: 'get',

					success: function(res) {
						console.log(res.data);

						if (res.data.code == 0) {
							let token = res.data.data.token;
							uni.setStorage({
								key: 'token',
								data: res.data.data.token,
								success: function() {

								}
							});
							uni.setStorage({
								key: 'account',
								data: res.data.data.userName,
							});
							uni.switchTab({
								url: '../home/index',
							})
						}
						console.log('request success');
					}
				})
				let nid = this.lastNotice.nid;
				uni.navigateTo({
					url: '/pages/notice/noticeInfo?nid=' + nid,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style>
	.banner {
		font-size: 14px;
		line-height: 24px;
	}

	.banner image {
		width: 100%;
	}

	.fun-list {
		display: flex;
		flex-wrap: wrap;
		padding-top: 10px;
	}

	.fun-item {
		width: 20%;
		height: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 10px 0 10px 0;
	}

	.fun-item image {
		width: 60rpx;
		height: 60rpx;
	}

	.funName {
		text-align: center;
		line-height: 60rpx;
	}

	.notice {
		display: flex;
		height: 160rpx;
		margin: 20rpx 0 20rpx 0;
	}

	.notice image {
		width: 20%;
		height: 100%;
		padding: 10px 10px 10px 0;
	}

	.notice-content {
		display: flex;
		flex-direction: column;
		line-height: 60rpx;
		padding-left: 10px;
	}

	.notice-text {
		font-size: 24rpx;
		color: rgb(175, 175, 175);
	}

	.pro-item {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		line-height: 100rpx;
		border-bottom: 1px solid gainsboro;
	}

	.pro-item image {
		width: 60rpx;
		height: 60rpx;
	}

	.pro-item text {
		margin-left: 30rpx;
	}
	
	.score-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
	}
	
	.score-item-info {
		line-height: 50rpx;
		padding-left: 10rpx;
	}
</style>
